<template>
  <div class="menu">
    <div class="menu-title">数据看板</div>
    <el-aside width="100%">
      <el-menu
          v-for="item in routers"
          :key="item.path"
          :default-active="showIndex"
          @select="selectItem"
      >
        <el-menu-item v-if="item.meta" v-show="item.show" :index="item.path" @click='jumpto(item.path)'>
          <span slot="title">{{item.meta.title}}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
  </div>
</template>
<script>
import {jumpto} from "@/utils/index"
import eventHub from '@/utils/eventHub'
export default {
  data() {
    return {
      jumpto,
      show: true,
      showIndex: '',
      routers: []
    };
  },
  computed: {
    auth() {
      return this.$store.state.auth;
    },
    getActive() {
      return this.$route.path.split("/")[1];
    },
    // routers(){
    //   // return this.$router.options.routes
    //   return [{path:'/',name:"home",meta:{"title":"交易看板"}}]
    // }
  },
  mounted(){
    // this.showIndex = this.routers[0].path
    console.log(this.$router.options.routes);
    eventHub.$on('add', value => {
      console.log(value) // 'hello'
      this.routersChange(value)
    })
  },
  methods: {
    routersChange(value){
      console.log(value)
      // this.routers[0].show = fa
      for(let item of this.routers){
        item.show = false
      }
      for(let items of value){
        this.routers.push(items)
      }
      this.showIndex = value[0].path
      console.log(this.routers)
      console.log(this.showIndex)
    },
    selectItem(index,path){
      console.log(index)
      console.log(path)
      this.showIndex = index
    }
  },
};
</script>
<style scoped>
@import '/assets/styles/reset';
</style>
<style>
.el-menu{
  background-color: #3C3D4E!important;
  border-right: none!important;
}
.el-menu-item{
  color: #9294AB!important;
}
.el-menu-item:hover{
  color: #FFFFFF!important;
  background-color: #409EFF!important;
}
.el-menu-item.is-active{
  color: #FFFFFF!important;
  background-color: #409EFF!important;
}
.menu{
  width: 11.9%;
  height: 100%;
  background-color: #3C3D4E;
  position: fixed;
  z-index: 99;
  color: #9294AB;
  left: 0;
  top: 0;
}
.menu-title{
  width: 100%;
  height: 60px;
  color: #FFFFFF;
  /*background-color: red;*/
  font-size: 20px;
  text-align: center;
  background-color: #3C3D4E;
  line-height: 60px;
  border-bottom: #9fa5b6 solid 1px;
}
</style>
